<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="100px">
      <el-descriptions title="基本信息：" direction="vertical" :column="3" border v-if="editData.isAnonymous===1">
        <el-descriptions-item labelStyle="font-weight: bold" label="被反映单位">{{ editData.departmentText }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="被反映对象">{{ editData.reflectedObject }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="反映时间">{{ editData.createTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="基本信息：" direction="vertical" :column="3" border v-if="editData.isAnonymous===0">
        <el-descriptions-item labelStyle="font-weight: bold" label="姓名">{{ editData.name }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="身份证号">{{ editData.idNumber }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="联系电话">{{ editData.phone }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="被反映单位">{{ editData.departmentText }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="被反映对象">{{ editData.reflectedObject }}
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="反映时间">{{ editData.createTime }}
        </el-descriptions-item>
      </el-descriptions>
      <template>
        <div class="el-descriptions">
          <div style="height: 20px;"></div>
          <div class="el-descriptions__header">
            <div class="el-descriptions__title">举证材料：</div>
            <div class="el-descriptions__extra"></div>
          </div>
        </div>
      </template>
      <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item labelStyle="font-weight: bold" label="图片">
          <el-image
              v-for="item in imageUrls"
              referrerpolicy="no-referrer"
              style="width: 100px!important; height: 100px!important;"
              :src="imageUrl + item"
              fit="scale-down"
              :preview-src-list="[imageUrl + item]"
          />
        </el-descriptions-item>
        <el-descriptions-item labelStyle="font-weight: bold" label="视频">
          <video v-if="videoUrls.length > 0" controls style="width: 100px!important; height: 100px!important;">
            <source v-for="videoUrl in videoUrls" :src="imageUrl + videoUrl" type="video/mp4"/>
          </video>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
  </div>
</template>
<script>

export default {
  components: {},
  props: {
    editData: {
      type: Object,
      default: () => {
        return {rules: []}
      }
    },
  },
  data() {
    return {
      formLoading: false,
      imageUrl: '',
      imageUrls: [],
      videoUrls: []
    }
  },
  mounted() {
    this.imageUrl = process.env.VUE_APP_IMAGE_URL
    const materials = this.editData.evidenceMaterials.split(',');
    materials.forEach(material => {
      if (material.endsWith('.png') || material.endsWith('.jpg') || material.endsWith('.jpeg')) {
        this.imageUrls.push(material);
      } else if (material.endsWith('.mp4') || material.endsWith('.mov')) {
        this.videoUrls.push(material);
      }
    });
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
